<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8">
    <title>系统配置</title>
    <link rel="stylesheet" href="../../../assert/css/font.css" th:href="@{/assert/css/font.css}"/>
    <link rel="stylesheet" href="../../../assert/css/bootstrap.min.css" th:href="@{/assert/css/bootstrap.min.css}"/>
    <link rel="stylesheet" href="../../../assert/css/bootstrap-table.css" th:href="@{/assert/css/bootstrap-table.css}"/>
    <link rel="stylesheet" href="../../../assert/css/bootstrapValidator.css" th:href="@{/assert/css/bootstrapValidator.css}"/>
    <link rel="stylesheet" href="../../../assert/css/toastr.min.css" th:href="@{/assert/css/toastr.min.css}"/>
    <link rel="stylesheet" href="../../../assert/css/style.css" th:href="@{/assert/css/style.css}"/>
    <link rel="stylesheet" href="../../../assert/css/index.css" th:href="@{/assert/css/index.css(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"/>
    <link rel="stylesheet" href="../../../assert/css/common.css" th:href="@{/assert/css/common.css}"/>
</head>
<body class="laydate_body">
<a id="basePath" th:href="@{/}"></a>
<div class="wrapper wrapper-content">
    <div class="ibox">
        <!--<div class="con-title">-->
            <!--<h4>系统配置</h4>-->
        <!--</div>-->
        <div class="resourceCon">
            <div class="con-operation clearfix">
                <div class="cquery  clearfix" style="margin-bottom:5px;">
                    <div class="search_group">
                        <div class="control-inline">
                            <div class="querySearch">
                                <input id="codeSearch" class="form-control" type="text" placeholder="请输入参数编号"/>
                                <input id="nameSearch" class="form-control" type="text" placeholder="请输入参数名称"/>
                            </div>
                        </div>
                    </div>
                    <div class="search_group">
                        <button id="searchBtn" type="button" class="querybtn btn btn-danger">查询</button>
                        <button id="reset" type="reset" class="btn  btn-default">重置</button>
                    </div>
                </div>
                <!--   <a class="cblue">高级查询</a> -->
                <div class="obtns clearfix">
                    <button class="btn btn-default" type="button" data-toggle="modal" data-target="#configModal">
                        <i class="fa fa-plus"></i>参数配置
                    </button>
                    <button id="editBtn" class="btn btn-default" type="button">
                        <i class="fa fa-pencil"></i>修改
                    </button>
                    <button id="batchDeleteBtn" class="btn btn-default" type="button">
                        <i class="fa fa-trash"></i>删除
                    </button>
                </div>
            </div>
            <table id="configTable"></table>
            <!-- 配置管理Modal -->
            <div class="modal fade" id="configModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">添加参数配置</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" role="form" id="configAddForm">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label"><span class="respan">*</span>参数标识：</label>
                                    <div class="col-sm-7">
                                        <input type="text" class="form-control" name="code" placeholder="请输入参数编号">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label"><span class="respan">*</span>参数名称：</label>
                                    <div class="col-sm-7">
                                        <input type="text" class="form-control" name="name" placeholder="请输入参数名称">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label"><span class="respan">*</span>参数值：</label>
                                    <div class="col-sm-7">
                                        <input type="text" class="form-control" name="value" placeholder="请输入参数值">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">备注：</label>
                                    <div class="col-sm-7">
                                        <textarea class="form-control" name="description"
                                                  placeholder="请输入内容"></textarea>
                                    </div>
                                </div>
                                <button type="reset" id="addResetBtn" hidden>重置</button>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="savebtn btn btn-primary" id="addSaveBtn">保存</button>
                            <button type="button" class="cancelbtn btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--配置修改modal -->
            <div class="modal fade" id="editConfigModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">修改参数</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" role="form" id="configEditForm">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label"><span class="respan">*</span>参数编号：</label>
                                    <div class="col-sm-7">
                                        <input type="text" class="form-control" name="code" id="editCode" value=""
                                               readonly/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label"><span class="respan">*</span>参数名称：</label>
                                    <div class="col-sm-7">
                                        <input type="text" class="form-control" name="name" placeholder="请输入参数名称">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label"><span class="respan">*</span>参数值：</label>
                                    <div class="col-sm-7">
                                        <input type="text" class="form-control" name="value" placeholder="请输入参数值">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">备注：</label>
                                    <div class="col-sm-7">
                                        <textarea class="form-control" name="description"
                                                  placeholder="请输入内容"></textarea>
                                    </div>
                                </div>
                                <button type="reset" id="editResetBtn" hidden>重置</button>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="savebtn btn btn-primary" id="editSaveBtn">保存</button>
                            <button type="button" class="cancelbtn btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--确定 modal -->
            <div class="modal fade" id="enshureModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <input type="hidden" id="deleteCode" value=""/>
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">删除行</h4>
                        </div>
                        <div class="modal-body">
                            <p>确定删除吗</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="csavebtn btn btn-primary">确定</button>
                            <button type="button" class="cancelbtn btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../../assert/js/jquery.js" th:src="@{/assert/js/jquery.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/bootstrap.min.js" th:src="@{/assert/js/bootstrap.min.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<!--<script src="../../../assert/js/bootstrap-table.js" th:src="@{/assert/js/bootstrap-table.js}"></script>-->
<script src="../../../assert/js/plugin/bootstrap-table/bootstrap-table.min.js"
        th:src="@{/assert/js/plugin/bootstrap-table/bootstrap-table.min.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/bootstrapValidator.js" th:src="@{/assert/js/bootstrapValidator.js}"></script>
<script src="../../../assert/js/base.js" th:src="@{/assert/js/base.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/toastr.min.js" th:src="@{/assert/js/toastr.min.js}"></script>
<script type="text/javascript">
    //项目名称
    var basePath = $("#basePath").attr("href");
    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#configTable').bootstrapTable({
                url: basePath + "rest/sysConfig/sysConfigByPage", //请求后台的URL（*）
                method: "post", //请求方式（*）
                dataType: "json",
                contentType: "application/x-www-form-urlencoded;charset=UTF-8",
                dataField: "rows", //服务端返回数据键值 就是说记录放的键值是rows，分页时使用总记录数的键值为total
                totalField: "total",
                striped: true, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true, //是否显示分页（*）
                sortable: true, //是否启用排序
                sortName: "code", //排序方式
                sortOrder: "desc", //排序方式
                clickToSelect: true,
                queryParams: oTableInit.queryParams, //传递参数（*）
                queryParamsType: "", //  queryParamsType = 'limit' 参数: limit, offset, search, sort, order;
                sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1, //初始化加载第一页，默认第一页
                pageSize: 10, //每页的记录行数（*）
                pageList: [10, 15, 20, 25], //可供选择的每页的行数（*）
                idField: "code",
                uniqueId: "code", //每一行的唯一标识，一般为主键列
                columns: [{
                    field: 'checkStatus',
                    title: '全选',
                    checkbox: true
                },
                    {
                        field: 'code',
                        title: '参数编号',
                        sortable: true
                    },
                    {
                        field: 'name',
                        title: '参数名称',
                        sortable: true
                    },
                    {
                        field: 'value',
                        title: '参数值',
                        sortable: true
                    },
                    {
                        field: 'description',
                        title: '备注',
                        sortable: true,
                        width:300,
                         formatter: function (value, row, index) {
                        if(value == null){
                            value=""
                        }
                        return "<div class='onoteBoxTable' title='"+value+"'>"+value+"</div>";
                    }
                    }
                ],
                formatLoadingMessage: function () {
                    return "请稍等，正在加载中...";
                },
                formatNoMatches: function () { //没有匹配的结果
                    return '无符合条件的记录';
                },
                onLoadSuccess: function (data) {  //加载成功时执行
                    resize.me();
                },
                onLoadError: function (data) {
                    $('#configTable').bootstrapTable('removeAll');
                },
                responseHandler: function (res) {
                    return {
                        total: res.totalCount,
                        rows: res.result
                    };
                }
            });
        };
        //得到查询的参数
        oTableInit.queryParams = function (params) {
            var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                "pageSize": params.pageSize,
                "pageNum": params.pageNumber,
                "sortName": this.sortName,
                "sortOrder": this.sortOrder,
                "name": $.trim($("#nameSearch").val()),
                "code": $.trim($("#codeSearch").val())
            };
            return temp;
        };
        return oTableInit;
    };
    // 添加配置
    var configAddFun = {
        init: function () {
            configAddFun.formInit();
            configAddFun.save();
        },
        formInit: function () {
            // 初始化表单
            $("#configModal").on("show.bs.modal", function () {
                $("#addResetBtn").click();
            });
        },
        save: function () {
            $("#addSaveBtn").off("click").on("click", function () {
                var bv = $('#configAddForm').data('bootstrapValidator');
                bv.validate();
                if (bv.isValid()) {
                    $.ajax({
                        type: "post",
                        url: basePath + "rest/sysConfig/sysConfigAdd",
                        data: $("#configModal form").serialize(),
                        success: function (data) {
                            if (data.type == "success") {
                                $("#configModal").modal("hide");
                                $("#configTable").bootstrapTable("refresh");
                                toastr.success("配置添加成功");
                            } else {
                                toastr.error("配置添加失败");
                            }
                        }
                    });
                }
            });
        }
    };

    // 修改配置
    var configEditFun = {
        init: function () {
            configEditFun.openEditModal();
            configEditFun.formInit();
            configEditFun.save();
        },
        openEditModal: function () {
            $("#editBtn").off("click").on("click", function () {
                // 先获取选中的行
                var rows = $("#configTable").bootstrapTable("getSelections");
                if (rows.length == 0) {
                    toastr.error('请选择行');
                } else if(rows.length > 1) {
                    toastr.error('单次只能选择一行进行修改');
                }else{
                    var code = rows[0].code;
                    $("#editCode").val(code);
                    $("#editConfigModal").modal("show");
                }
            });
        },
        formInit: function () {
            // 初始化表单
            $("#editConfigModal").on("show.bs.modal", function () {
                var code = $("#editCode").val();
                // 赋值
                $.ajax({
                    type: "post",
                    url: basePath + "rest/sysConfig/sysConfigGetByPK",
                    data: {code: code},
                    success: function (data) {
                        if (data != null) {
                            $("#editConfigModal input[name='code']").val(data.code).attr("oldvalue", data.code);
                            $("#editConfigModal input[name='name']").val(data.name);
                            $("#editConfigModal input[name='value']").val(data.value);
                            $("#editConfigModal :input[name='description']").val(data.description);
                        }
                    }
                });
            });
        },
        save: function () {
            $("#editSaveBtn").off("click").on("click", function () {
                var bv = $('#configEditForm').data('bootstrapValidator');
                bv.validate();
                if (bv.isValid()) {
                    $.ajax({
                        type: "post",
                        url: basePath + "rest/sysConfig/sysConfigUpdate",
                        data: $("#editConfigModal form").serialize(),
                        success: function (data) {
                            if (data.type == "success") {
                                $("#editConfigModal").modal("hide");
                                $("#configTable").bootstrapTable("refresh");
                                toastr.success("配置修改成功");
                            } else {
                                toastr.error("配置修改失败");
                            }
                        }
                    });
                }
            });
        }
    };

    // 配置删除
    var configDeleteFun = {
        init: function () {
            configDeleteFun.batch();
            configDeleteFun.confimDelete();
        },
        batch: function () {
            // 批量删除按钮事件绑定
            $("#batchDeleteBtn").off("click").on("click", function () {
                // 初始化要删除的id值
                $("#deleteCode").val("");
                // 先获取选中的行
                var rows = $("#configTable").bootstrapTable("getSelections");
                if (rows.length == 0) {
                    toastr.error('请选择行');
                } else {
                    var codeList = [];
                    $.each(rows, function (index, row) {
                        codeList.push(row.code);
                    });
                    $("#deleteCode").val(codeList.join(","));
                    // 弹出删除确认模态框
                    $("#enshureModal").modal("show");
                }
            });
        },
        confimDelete: function () {
            // 在删除模态框中点击确定时触发的删除事件绑定
            $(".csavebtn").off("click").on("click", function () {
                var codeList = $("#deleteCode").val().split(",");
                $.ajax({
                    type: "post",
                    url: basePath + "rest/sysConfig/sysConfigDelete",
                    data: {codeList: codeList},
                    traditional: true,
                    success: function (data) {
                        // 相应后关闭model框
                        $("#enshureModal").modal("hide");
                        if (data.type == "success") {
                            toastr.success('删除成功');
                        } else {
                            toastr.error('删除失败');
                        }
                        // 刷新表格
                        $("#configTable").bootstrapTable("refresh");
                    }
                });
            });
        }
    };

    //校验
    var validateFun = {
        init: function () {
            this.initKeyValidator();
            this.initOpen();
        },
        initKeyValidator: function () {
            var option = {
                live: "enabled",
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    code: {
                        validators: {
                            notEmpty: {
                                message: '参数编号不能为空'
                            },
                            callback: {
                                message: '该编号已存在',
                                callback: function (value, validator, $field) {
                                    if(value == $field.attr("oldvalue") || undefined == $field.attr("oldvalue")){
                                        return true;
                                    }
                                    var isExist = false;
                                    $.ajax({
                                        type: "post",
                                        async: false,
                                        url: basePath + "rest/sysConfig/codeUniqueCheck",
                                        data: {code: value},
                                        success: function (data) {
                                            if (data.type == "success") {
                                                isExist = true;
                                            }
                                        }
                                    });
                                    return isExist;
                                }
                            }
                        }
                    },
                    name: {
                        validators: {
                            notEmpty: {
                                message: '参数名称不能为空'
                            }
                        }
                    },
                    value: {
                        validators: {
                            notEmpty: {
                                message: '参数值不能为空'
                            }
                        }
                    }
                }
            };
            $('#configAddForm').bootstrapValidator(option);
            $('#configEditForm').bootstrapValidator(option);
        },
        initOpen: function () {
            $("#configModal").on("hide.bs.modal", function () {
                $('#configAddForm').data('bootstrapValidator').resetForm(true);
            });

            $("#editConfigModal").on("hide.bs.modal", function () {
                $('#configEditForm').data('bootstrapValidator').resetForm(true);
            });
        }
    };

    // 基础功能
    var baseFun = {
        init: function () {
            baseFun.search();
            baseFun.reset();
        },
        // 点击搜索时表格重新加载
        search: function () {
            $("#searchBtn").off("click").on("click", function () {
                $("#configTable").bootstrapTable('refreshOptions', {pageNumber:1});
                $("#configTable").bootstrapTable('refresh');
            });
            $("body").on("keyup", function (e) {
                var code = e.charCode || e.keyCode;
                if (code == 13) {
                    //此处编写用户敲回车后的代码
                    $("#configTable").bootstrapTable('refreshOptions', {pageNumber:1});
                    $("#configTable").bootstrapTable('refresh');
                }
            })
        },
        reset:function(){
            $("#reset").on("click", function () {
                 bs.resetSearch($(".cquery"));
                $("#configTable").bootstrapTable('refreshOptions', {pageNumber:1});
                $("#configTable").bootstrapTable('refresh');
            })
        }
    };
    var resize = {
        init: function () {
            resize.me();
            $(window).resize(function () {
                resize.me();
            })
        },
        me: function () {
            var winW = $(window).width();
            var winH = $(window).height();
            $(".ibox").width(winW - 20);
            $(".ibox").height(winH - 20);
            bs.autoTableHeight($('#configTable'),winH -$(".cquery").height()-22-$(".obtns").height())
        }
    };
    $(function () {
        // 表格初始化
        var oTable = new TableInit();
        oTable.Init();
        baseFun.init();
        configDeleteFun.init();
        configAddFun.init();
        configEditFun.init();
        validateFun.init();
        resize.init();
    });
</script>
</body>

</html>